//获取应用实例
const app = getApp();

const service = require('../../services/service.js');
const formatTime = require('../../utils/utils.js');
const wxCharts = require('../../utils/wxcharts.js');

Page({
	data: {
		input_showed: false,
        input_val: "",
        date:null,
        hour:null,
        show_hourly:false,
        lineChart:null,
        recommend_icon:[
            'icon-kongdiao',
            'icon-ziyuan',
            'icon-iconset0451',
            'icon-yaowan',
            'icon-xiche',
            'icon-kongqizhiliang',
            'icon-tshirt'
        ],
        icon_color:[
            '#7fccff',
            '#79a5e5',
            '#d6bf1e',
            '#e4363f',
            '#c5c131',
            '#e46b24',
            '#c742b7'
        ]
	},
	// 分享成功回调逻辑
	onShareAppMessage: function (res) {

	},
	// 下拉刷新逻辑
	onPullDownRefresh: function () {
	},
	// 页面加载成功逻辑
	onLoad: function () {
        this.setData({
            scree_height:wx.getSystemInfoSync().windowHeight
        })
        this.getFixedHight();
        if(!!app.globalData.city){
          this.getWeather(app.globalData.city)
        }else{
          app.cityCallback = city=>{
          this.getWeather(city)
          }
        }
        this.getDate();
        // this.canvasData()
	},
	showInput: function () {
        this.setData({
            input_showed: true,
        });
    },
    hideInput: function () {
        this.setData({
            input_showed: false
        });
    },
    clearInput: function () {
        this.setData({
            input_val: ""
        });
    },
    inputTyping: function (e) {
        if(!e.detail.value){
            this.setData({
                input_val: '北京'
            });
        }else {
            this.setData({
                input_val: e.detail.value
            });
        }
        this.getWeather(this.data.input_val);
        this.hideInput();
        this.clearInput();
    },
    getFixedHight: function () {
        const query = wx.createSelectorQuery().in(this)
        query.select('.fixed').boundingClientRect((res) => {
            this.setData({
                fixed_hight:res.height
            });
        }).exec();
    },
    getWeather: function(city) {
        wx.showLoading({
            title: 'Loading...',
        });
        service.getWeather(city).then(res=>{
            wx.hideLoading();
            if(res.status == 0) {
                const data = res.result;
                var weeks = [],
                    templows =[],
                    temphighs = [];
                data.daily.forEach(val=>{
                    val.date = val.date.slice(5);
                    val.week = val.week.replace('星期','周');
                    weeks.push(val.week);
                    templows.push(val.night.templow);
                    temphighs.push(val.day.temphigh);
                });
                data.index.forEach((val,index) => {
                    if(val.iname.length >5){
                        val.iname = val.iname.slice(0,4)
                    };
                    val.icon = this.data.recommend_icon[index];
                    val.icolor = this.data.icon_color[index]
                })
                this.setData({
                    weather:data,
                    recommend:[data.index.slice(0,4),data.index.slice(4,7)]
                });
                this.canvasData(weeks, templows, temphighs);
            }else {
                wx.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                })
            }
        })
    },
    getDate: function() {
        const date = formatTime.formatTime(new Date());
        const dateArray = date.split(' ');
        this.setData({
            date: dateArray[0].slice(5).replace('/','-'),
            hour: Number(dateArray[1].slice(0,2))
        })
    },
    toggleHourly: function(e) {
        if(e.currentTarget.dataset.detail){
          this.setData({
                show_hourly:!this.data.show_hourly
            })  
        }
    },
    canvasData: function(week, templow, temphigh) {
        this.data.lineChart = new wxCharts({
            canvasId: 'lineCanvas',
            type: 'line',
            categories: week,
            animation: true,
            series:[{
                name:'最低气温',
                data:templow
            },{
                name:'最高气温',
                data:temphigh
            }],
            // yAxis: {
            //     title: '一周气温趋势',
            // },
            background:'#39b738',
            width: wx.getSystemInfoSync().windowWidth,
            height: 200,
            dataLabel:false
        }) 
    },
    touchHandler: function (e) {
        this.data.lineChart.showToolTip(e, {
            format: function (item, category) {
                return category + ' ' + item.name + ':' + item.data 
            }
        });
    },  
    alertDetail: function (e) {
        wx.showToast({
            title: e.currentTarget.dataset.detail,
            icon: 'none',
            duration: 2500
        })
    }    
})
